<template>
  <div class="container">
    <!-- div left -->
    <div class="left">
      <!-- 折叠按钮-->
      <div @click="toggleCollapse()">
        <el-icon size="24" v-show="!isMenuOpen"><Fold /></el-icon>
        <el-icon size="24" v-show="isMenuOpen"><Expand /></el-icon>
      </div>
      <!-- 面包屑 -->
      <div>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <template v-for="(item, index) in breadList">
            <el-breadcrumb-item
                v-if="item.name"
                :key="index"
                :to="item.path"
            >{{ item.meta.title }}</el-breadcrumb-item>
          </template>
        </el-breadcrumb>
      </div>
    </div>
<!--     div right -->
    <div class="right">
      <div>
        <span >账号：{{userData.loginName}}</span>
      </div>
      <div>
        <el-avatar> {{userData.name}} </el-avatar>
      </div>
      <div>
        <el-dropdown>
          <el-icon size="24"><MoreFilled /></el-icon>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item>
                <el-icon><UserFilled /></el-icon>个人信息
              </el-dropdown-item>
              <el-dropdown-item>
                <el-icon><EditPen /></el-icon>修改密码
              </el-dropdown-item>
              <el-dropdown-item>
                <el-icon><ArrowLeft /></el-icon>退出登录
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script setup>
import {
  Fold,
  Expand,
  MoreFilled,
  EditPen,
  ArrowLeft,
  UserFilled
} from '@element-plus/icons-vue'
import {ref, defineEmits, watch} from 'vue'

// 面包屑
import { useRouter,useRoute } from 'vue-router'

let router = useRouter()
let route = useRoute()

let breadList = ref()
let getMatched=()=>{
  console.log("route.matched:",route.matched);
  console
  breadList.value = route.matched.filter(item => item.meta && item.meta.title);
}
getMatched()

watch(() => route.path, (newValue, oldValue) => { //监听路由路径是否发生变化，之后更改面包屑
  console.log("======")
  breadList.value = route.matched.filter(item =>
      item.meta && item.meta.title
  );
  console.log("breadList.value", breadList.value)
})



import useUserInfoStore from '@/stores/userInfo.js'
const userInfoStore = useUserInfoStore();

// 用户数据模型
let userData = ref({
  id: '',
  name: '',
  loginName: ''
})


import {currentUserService} from '@/api/user.js'
// 获取登录用户信息
const getUser = async () => {
  let result = await currentUserService()
  // console.log(result)
  userData.value = result.data;
  userInfoStore.setInfo(result.data)
  // console.log("userData:",userData)
}
getUser()


// 折叠按钮处理
const emits = defineEmits(["parentClick"])
const isMenuOpen = ref(false)
const toggleCollapse = () => {
  isMenuOpen.value = !isMenuOpen.value
  console.log(isMenuOpen.value)
  emits("parentClick", isMenuOpen.value)
}


</script>

<style lang="scss" scope>
.container {
  overflow: auto; /* 清除浮动影响 */
  height: 48px;
  padding: 10px; /* 内边距 */
  border-bottom: 2px solid; /* 设置下边框宽度和样式 */
  border-bottom-color: #F5F5F5; /* 设置下边框颜色为红色 */
  background-color: #FFFFFF;
}

.left {
  height: 48px;
  float: left;
  display: flex;
  align-items: center; /* 垂直居中子项 */
  justify-content: center; /* 水平居中子项（如果需要）*/
}

.left > div {
  padding-right: 10px; /* 设置直接子元素的 padding */
}

.right {
  float: right;
  display: flex;
  align-items: center; /* 垂直居中子项 */
  justify-content: center; /* 水平居中子项（如果需要）*/
}
.right > div {
  padding-right: 10px; /* 设置直接子元素的 padding */
}
</style>
